/**
 * Created by win8 on 2016-07-26.
 */
;
(function () {
    var menu = function (element) {
        this.el = $(element);
        this.init();
        this.initEvent();
    };

    menu.prototype = {
        init: function () {
            $("body").find('.mask').remove();
            var _self = this;
            _self.subMenu = $(this.el.attr('data-menu'));
            _self.masks = null;
            _self.el.on('click', function () {
                _self.masks = $("body").append(_self.mask()).find('.mask')
                _self.subMenu.show();
                _self.masks.show();
            });
            $(document).on('tap click', '.mask', function () {
                _self.subMenu.hide();
                _self.close();
            });
        },
        initEvent: function () {
            var _self = this;
            _self.subMenu.on('click', 'li', function () {
                _self.subMenu.hide();
                _self.close();
            })
        },
        mask: function () {
            var _this = this;
            return $('<div>').on('click', function () {
                _this.close();
            }).addClass('mask').css('display', "block");
        },
        close: function () {
            $('.mask').remove();
        }
    };

    $.fn.dropdownmenu = function () {
        return new menu(this);
    }
})(Zepto);